<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>DStation后台管理</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Bootstrap Core CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/metisMenu/metisMenu.min.css}" rel="stylesheet">

    <!-- Custom CSS -->
    <link th:href="@{/boostrapTemplatResources/dist/css/sb-admin-2.css}" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link th:href="@{/boostrapTemplatResources/vendor/morrisjs/morris.css}" rel="stylesheet">

    <!-- Custom Fonts -->
    <link th:href="@{/boostrapTemplatResources/vendor/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="/webjars/jquery/3.1.1/jquery.js"></script>
    <script src="/js/sweetAlert.js"></script>
</head>

<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div th:include="admin/header::header"></div>
<div th:include="admin/sidebar::sidebar"></div>
</nav>

<!--显示主体部分 -->
<div id="wrapper">
    <!-- 主界面显示D站介绍信息 -->
    <div id="page-wrapper">
        <!-- 存放视频的分类信息的table -->
        <br>
        <div>
            <div class="col-md-4 col-md-push-8">

                <input type="text" id="searchName" placeholder="搜索标签内容">
                <button  class="btn btn-primary btn-xs" th:onclick="searchTag()">
                    搜索
                </button>

            </div>
            <div class="col-md-8 col-md-pull-4">

                <button class="btn btn-primary btn-xs" th:onclick="insert()">新增标签</button>
            </div>
        </div>
        <table id="table"  class="table table-bordered">
            <thead>
            <tr>
                <th>视频分类Id</th>
                <th>类别名</th>
                <th>前置类别</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="data : ${pageData.records}">
                <td th:text="${data.classificationId}"></td>
                <td th:text="${data.classificationName}"></td>
                <td th:text="${data.preClassificationId}"></td>
                <td th:text="${data.createDate}"></td>
                <td>
                    <a class="btn btn-primary btn-xs" th:onclick="editLabelInfo([[${data.classificationId}]],[[${data.classificationName}]])">修改</a> &nbsp;  &nbsp;
                    <a class="btn btn-danger btn-xs" th:onclick="'deleteLabelInfo('+${data.classificationId}+')'">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
        <div >

        </div>
    </div>

    <!-- /#page-wrapper -->
</div>
<div>

    <div class="center " style="padding-left: 45%;!important;">
        <a th:href="@{/classification/viewClassification(page=${pageData.current}-1)}"
           th:class="${pageData.current == 1}? 'disabled btn btn-primary btn-xs':'btn btn-primary btn-xs'"
        >上一页</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        当前第 [[${pageData.current}]]页,共 [[${pageData.pages}]] 页.一共 [[${pageData.total}]] 条记录
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a th:href="@{/classification/viewClassification(page=${pageData.current}+1)}"
           th:class="${pageData.current == pageData.pages?'disabled btn btn-primary btn-xs':'btn btn-primary btn-xs'}" >下一页</a>

    </div>
</div>
<div class="modal fade" id="insertModel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">视频分类增加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">类别名</label>
                        <div  class="col-sm-10">
                            <input class="form-control" id="classiName" required/>
                        </div>
                        <label class="col-sm-2 control-label">分类级别</label>
                        <div  class="col-sm-10">
                            <input class="form-control" id="level" required/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary"  th:onclick="insertLabel()"> 确认</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="updateModel" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">视频类别名修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" th:action="@{/renameLabel}">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">原类别名</label>
                        <div  class="col-sm-10">
                            <input class="form-control" id="oldName" readonly required/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">修改后</label>
                        <div  class="col-sm-10">
                            <input class="form-control" id="newName" required/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="Confirm" th:onclick="rename()"> 确认</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<script>

    function searchTag() {
        var name=$("#searchName").val();

        if(name==""){
            swal("Error", "不允许分类名为空！", "error");
        }else {
            window.location.href="viewClassification?page=1&search="+name;
        }
    }

    function insertLabel() {
        var classiName=$("#classiName").val();
        var level=$("#level").val();

        if(classiName==""){
            swal("Error", "不允许类别名为空！", "error");
        }else {
            $.ajax(
                {
                    type: "GET",
                    url: "/classification/save",
                    async: false,
                    cache: true,
                    data: {
                        "classificationName":classiName,
                        "preClassificationId":level
                    },
                    success: function (data) {
                        if(data["isSave"] == true) {
                            swal("增加成功!", {
                                buttons: false,
                                timer: 500
                            });

                            setTimeout(function(){window.location.reload();},600);
                        } else {
                            swal("Error", "新增失败！", "error");
                        }
                    },
                    error: function (data) {
                        swal("Error", "网络错误，请联系管理员！", "error");
                    }
                }
            );
        }
    }
    function insert() {
        $("#insertModel").modal("show");
    }
    function rename() {
        var oldname=$("#oldName").val();
        var newname=$("#newName").val();
        if(newname==""){
            swal("Error", "不允许类别名为空！", "error");
        }else {
            $.ajax(
                {
                    type: "GET",
                    url: "/classification/update",
                    async: false,
                    cache: true,
                    data: {
                        "oldName":oldname,
                        "newName":newname
                    },
                    success: function (data) {
                        if(data["isModify"] == true) {
                            swal("修改成功!", {
                                buttons: false,
                                timer: 500
                            });

                            setTimeout(function(){window.location.reload();},500);
                        } else {
                            swal("Error", "修改失败！", "error");
                        }
                    },
                    error: function (data) {
                        swal("Error", "网络错误，请联系管理员！", "error");
                    }
                }
            );
        }
    }
    function editLabelInfo(id,oldName) {
        $('#oldName').val(oldName);
        $("#updateModel").modal("show");
    }
    function deleteLabelInfo(labelId) {
        swal({
            title: "确认弹框",
            text: "确定要删除这个类别吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
            if(flag) {
                $.ajax(
                    {
                        type: "GET",
                        url: "/classification/delete",
                        async: false,
                        cache: true,
                        data: {
                            "classificationId":labelId
                        },
                        success: function (data) {
                            if(data["isDelete"] == true) {
                                swal("删除成功!", {
                                    buttons: false,
                                    timer: 2000
                                });
                                setTimeout(function(){window.location.reload();},500);
                            } else {
                                swal("Error", "删除失败！", "error");
                            }
                        },
                        error: function (data) {
                            swal("Error", "网络错误，请联系管理员！", "error");
                        }
                    }
                );
            }
        });
    }
</script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<script th:src="@{/boostrapTemplatResources/js/html5shiv.js}"></script>
<script th:src="@{/boostrapTemplatResources/js/respond.min.js}"></script>

<!-- jQuery -->
<script th:src="@{/boostrapTemplatResources/vendor/jquery/jquery.min.js}"></script>

<!-- Bootstrap Core JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/bootstrap/js/bootstrap.min.js}"></script>

<!-- Metis Menu Plugin JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/metisMenu/metisMenu.min.js}"></script>

<!-- Morris Charts JavaScript -->
<script th:src="@{/boostrapTemplatResources/vendor/raphael/raphael.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/vendor/morrisjs/morris.min.js}"></script>
<script th:src="@{/boostrapTemplatResources/data/morris-data.js}"></script>

<!-- Custom Theme JavaScript -->
<script th:src="@{/boostrapTemplatResources/dist/js/sb-admin-2.js}"></script>

</body>

</html>
